<div ng-if="$ctrl.template" ng-init="$ctrl.init()">
    <div class="form-group">
        <h6>Layout {{$ctrl.folderType}}</h6>
        <div class="input-group mb-3">
            <select class="btn btn-outline-secondary custom-select col-sm-4" ng-options="item as item.fileName for item in $ctrl.templates track by item.id" ng-model="$ctrl.template" ng-change="$ctrl.selectTemplate($ctrl.template)"></select>
            <input class="form-control sel-filename" ng-change="$ctrl.new()" type="text" ng-model="$ctrl.template.fileName" value="{{$ctrl.template.fileName}}" placeholder="Input template name here...">
            <input class="template-id" type="hidden" ng-model="$ctrl.template.id" value="{{$ctrl.template.id}}">
        </div>
    </div>
    <tabs-v>
        <pane-v title="Razor Template">
            <ace-editor content-id="$ctrl.template.id" content="$ctrl.template.content"></ace-editor>
        </pane-v>
        <pane-v title="Scripts">
            <ace-editor content-id="$ctrl.template.id" content="$ctrl.template.scripts"></ace-editor>
        </pane-v>
        <pane-v title="Styles">
            <ace-editor content-id="$ctrl.template.id" content="$ctrl.template.styles"></ace-editor>
        </pane-v>
    </tabs-v>
</div>
